<template>
  <div>
    <el-table :data="ruleInfo" border style="width: 100%">
      <el-table-column prop="roleId" label="角色编号" width="200">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名" width="200">
      </el-table-column>
      <el-table-column prop="roleStatus" label="角色状态" :formatter="statusFormat" width="200">
      </el-table-column>
      <el-table-column prop="roleIdentify" label="Indentify" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.roleId)" type="text" size="small">授权</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
    	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    		:current-page="rulePageInfo.current" :page-sizes="[1,2,3]" :page-size="rulePageInfo.size"
    		layout="total, sizes, prev, pager, next, jumper" :total="rulePageInfo.total">
    	</el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-tree
        :data="menueData"
        ref="ids"
        node-key="menusId"
        show-checkbox
        :default-checked-keys="menuesId"
        :props="defaultProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="updateRuleMenue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"juese",
    data(){
      return{
        ruleInfo:[],
        dialogVisible:false,
        defaultProps: {
          children: 'children',
          label: 'menusName',
          id:'menusId'
        },
        menueData:[],
        menuesId:[],
        ruleId:"",
        menuesIdForm:[],
        rulePageInfo:{}
      }
    },
    methods:{
      handleClose(done) {
        location.reload();
      },
      qx() {
        this.dialogVisible = false
        location.reload()
      },
      handleClick(ruleId){
        alert(ruleId);
        this.ruleId=ruleId
        //获取所有的菜单及其children
        this.$http.get("/menus/findMenueByruleId",{params:{id:ruleId}}).then(resp=>{
          this.menueData=resp.data.data;
        })
        //勾选默认状态的,获取对应的menueId数组
        this.$http.get("/roleMenus/findMenuesId",{params:{id:ruleId}}).then(resp=>{
          this.menuesId=resp.data.data;
        })
        this.dialogVisible=true
      },
      statusFormat(row,column){
        if(row.ruleStatus==1){
          return "启用";
        }else{
          return "禁用";
        }
      },
      handleCurrentChange(current) {
      	this.getAllRule(current, this.rulePageInfo.size)
      },
      handleSizeChange(size) {
      	this.getAllRule(this.rulePageInfo.current, size)
      },
      //{params:{id:this.id}}
      getAllRule(currentPage, pagesize){
        this.$http.get("/role/getAllRule",{
    			params:{current: currentPage,
    			size: pagesize}
    		}).then(resp=>{
          this.rulePageInfo=resp.data.data;
          this.ruleInfo = resp.data.data.records
        })
      },
      updateRuleMenue(){
        let ids = this.$refs.ids.getCheckedNodes(false,true)
        console.log(ids)
        for(let i in ids){
          //i为下标
          this.menuesIdForm.push(ids[i].menusId)
        }
        //发送请求修改
          this.$http.post("roleMenus/updateRuleMenues",{roleId:this.ruleId,menusId:this.menuesIdForm}).then(resp=>{
            alert(resp.data.message)
            if(resp.data.code==200){
              this.dialogVisible=false;
              location.reload()
            }else{
              this.dialogVisible=false;
              location.reload()
            }
          })
      }
    },
    created() {
      this.getAllRule(1,3);
    }
  }
</script>

<style>
</style>
